<template>
  <div class="withdrawal_new">
    <div class="input_box">
      <div class="body_input">
        <div class="BankAddress">
          <div class="user_title">银行卡号</div>
          <div class="user_name">
            <span v-if="UserInformation.bankName">{{UserInformation.bankName}}
              尾号({{ UserInformation?.bankCardNum.substring(UserInformation.bankCardNum.length - 4) }})</span>
            <span class="arrow" @click="card_list" v-else>{{UserInformation.cardId?'点击绑定银行卡':'请前往app实名认证'}}</span>
            <img v-if="UserInformation.cardId" @click="card_list" :src="require('@/assets/images/other/back_.png')" alt="" />
          </div>
          <div v-if="opening_bank_" :class="!opening_bank_is ? 'isback_hong' : ''">
            {{ opening_bank_ }}
          </div>
        </div>
      </div>

      <div class="body_input">
        <div>
          <div class="user_title">真实姓名</div>
          <div class="user_name">
            <input v-if="UserInformation.realname" type="text" v-model="UserInformation.realname" disabled />
            <input v-else type="text" placeholder="请前往app实名认证" disabled />
          </div>
        </div>
      </div>

      <div class="body_input">
        <div>
          <div class="user_title">身份证号</div>
          <div class="user_name">
            <input type="text" v-if="UserInformation.cardId" v-model="UserInformation.cardId" disabled />
            <input type="text" v-else placeholder="请前往app实名认证" disabled />
          </div>
        </div>
      </div>

      <div class="body_input">
        <div>
          <div class="user_title">提现积分</div>
          <div class="user_name color_input">
            <input type="number" placeholder="0" v-model="WithdrawalPoints" />
          </div>
        </div>
      </div>

      <div class="balance">
        <span>积分余额：{{UserInformation.balance}}</span>
      </div>

      <div v-if=" UserInformation.realname && UserInformation.cardId" class="withdrawal_btn"
        @click.stop="okAddCardClick">提现</div>
      <div v-else class="withdrawal_btn_">请前往app实名认证</div>

      <div class="Tips_">
        <img v-if="isChecked" :src="require('@/assets/images/other/radius_trur.png')" @click="isChecked = !isChecked" alt="">
        <img v-else :src="require('@/assets/images/other/radius_false.png')" @click="isChecked = !isChecked" alt="">
        <span @click="topush">《平台合作协议》</span>
      </div>
    </div>

    <div class="result_rule">
      <span>提现规则：</span>
      <span>1. 100元≤可提现金额＜100,000元 </span>
      <span>2. 提现到银行卡，于申请后3个工作日内到账(节假日顺延)</span>
      <span>3. 提现仅可每周一发起一次</span>
      <span>4. 提现失败将退回积分</span>
    </div>
    <Popup v-model="withdrawTextshow" position="bottom" :style="{ height: model_height+59 +'vw'}" closeable
      close-icon-position="top-left" class="model_" round>
      <div class="top_title"> 选择提现银行卡 </div>
      <div class="bacg_box">
        <div v-for="item,index in card_list_" :key="index" class="box_list_card" @click="Select = index">
          <img v-if="item.bankIcon" :src="item.bankIcon" alt="">
          <img v-else :src="require('@/assets/images/other/black_card.png')" alt="">
          <div> {{item.bankName}}({{ item?.cardNum.substring(item.cardNum.length - 4)}}) <img v-if="index == Select"
              :src="require('@/assets/images/other/Select.png')" alt=""></div>
        </div>
      </div>
      <div class="addTo" @click="toWithdrawal_push">
        <div class="left_back">
          <img :src="require('@/assets/images/other/black_card.png')" alt="">
          <span>修改银行卡</span>
        </div>
        <div class="right_back">
          <img :src="require('@/assets/images/other/back_.png')" alt="">
        </div>
      </div>
      <div class="button_buttom">
        <div>确认</div>
      </div>
    </Popup>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, watch } from 'vue'
import { Toast, Popup } from "vant"
import { userPostWithdraw, userWithdrawText } from '@/api/recharge'
import { useRouter, useRoute } from 'vue-router'
import { getCookie } from '@/util/cookie'
import 'vant/lib/index.css'
export default defineComponent({
    components: {
        Popup
    },
    setup() {
        const router: any = useRouter()
        const route: any = useRoute()
        const data = reactive<Record<string, any>>({
            WithdrawalPoints: "", //提现积分
            UserInformation: {}, //用户信息
            opening_bank_: "",
            opening_bank_is: false,
            qs_opening_bank: "",
            isChecked: true,
            withdrawTextshow: false, //银行卡弹窗
            model_height: '', //弹窗高度
            card_list_: [], //银行卡列表
            Select: 0, //默认选择第一张银行卡
            userId: getCookie("userId"),
            token: getCookie("token"),
        })
        watch(data.WithdrawalPoints, () => {
            if (data.WithdrawalPoints > Number(data.UserInformation.balance)) {
                data.WithdrawalPoints = Math.floor(Math.abs(data.UserInformation.balance));
                return Toast("最多兑换" + data.UserInformation.balance);
            } else {
                if (data.WithdrawalPoints != "") {
                    data.WithdrawalPoints = Number(Math.floor(Math.abs(data.WithdrawalPoints)));
                }
            }
        }, { deep: true })
        const toWithdrawal_push = (): void => {
            return 
        }
        const okAddCardClick = async (): Promise<void> => { //提现
            if (data.WithdrawalPoints < 100) {
                Toast('最低提现100元')
                return 
            }
            if (!data.isChecked) {
                Toast('请勾选平台合作协议')
                return 
            }
            if (!data.UserInformation.bankCardNum) {
                Toast('银行卡号不能为空')
                return 
            }
            let arys = {
                type: '1',
                num: data.WithdrawalPoints,
                bankId: data.UserInformation.bankId,
                userId : data.userId,
                token: data.token,
            }; //参数
            const dataRes = await userPostWithdraw(arys)
            Toast(dataRes.data.text)
            withdrawText();
        }
        const card_list = ():void => {
            router.push({
                path: '/withdrawal_push'
            })
        }
        const handleDisabled = (): void => {
            data.isChecked = !data.isChecked;
            if (data.isChecked == true) {
                data.isDisabled = true;
            } else {
                data.isDisabled = false;
            }
        }
        const showPopup = (): void => {
            if (!data.cardNum) {
                Toast("银行卡号不能为空");
                return 
            }
        }
        const topush = (): void => {
            router.push({
                path: "/PlatformProtocol",
            });
        }
        const withdrawText = async (): Promise<void> => {
            let arys = {
                userId: data.userId,
                token: data.token,
            }; //参数
            const dataRes = await userWithdrawText(arys)
            if (dataRes.data.status === 0) {
                data.UserInformation = dataRes.data.result
            } else {
                Toast(dataRes.data.text)
            }
        }
        if (!data.token) {
            router.push({
                path: "/login",
                query: {
                    reductName: route.path
                }
            });
        }
        return {
            toWithdrawal_push,
            okAddCardClick,
            topush,
            card_list,
            withdrawText,
            showPopup,
            handleDisabled,
            ...toRefs(data)
        }
    }
})
</script>

<style lang="less" scoped>
@import './WithdrawalNew';
</style>